<template>
  <div>
    <br>
    <div
      id="pusher"
      style="width:300px;height:400px;background-color:#000000;margin:auto"
    />
    <br>
    <div style="text-align:center; margin:auto;">
      <input
        id="path"
        type="text"
        value=""
        placeholder="请输入直播服务器地址(rtmp)"
      >
      <button
        id="pp"
        @click="ppPusher()"
      >开始</button>
    </div>
    <div
      class="button"
      @click="switchCamera()"
    >切换摄像头</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      bstart: false,
      pusher: null
    }
  },
  mounted() {
    let msg = ''
    if (window.plus) {
      this.plusready()
      msg = plus.device.uuid
    } else {
      document.addEventListener('plusready', this.plusready, false)
      msg = false
    }
    return msg
  },
  methods: {
    switchCamera() {
      this.pusher.switchCamera()
    },
    plusReady() {
      // 创建直播推流控件
      this.pusher = new plus.video.LivePusher('pusher', {
        url: 'rtmp://192.168.42.57:1935/live/mylive'
      })
      // 监听状态变化事件
      this.pusher.addEventListener(
        'statechange',
        function(e) {
          console.log('statechange: ' + JSON.stringify(e))
        },
        false
      )
    },
    ppPusher() {
      if (this.bstart) {
        this.pusher.stop()
        this.bstart = false
      } else {
        var path = document.getElementById('path').value
        if (path && path.length > 0) {
          this.pusher.setOptions({ url: path })
          this.pusher.start()
          this.bstart = true
        } else {
          alert('请输入直播服务器地址')
        }
      }
      var pp = document.getElementById('pp')
      pp.innerText = this.bstart ? '停止' : '开始'
    }
  }
}
</script>
<style scoped>
input {
  width: 70%;
  font-size: 16px;
  padding: 0.2em 0.2em;
  border: 1px solid #00b100;
  -webkit-user-select: text;
}
.button,
button {
  width: 20%;
  margin: 6px 0 6px 6px;
  font-size: 16px;
  color: #fff;
  background-color: #00cc00;
  border: 1px solid #00b100;
  padding: 0.2em 0em;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
</style>
